import { DesignTable, ParameterObjectType } from '@amcax/base';
import AntIcon from '@ant-design/icons';
import { DesignTableEditor } from '@app-cad/common/commands/cmd-design-table/DesignTableEditor';
import { Button } from 'antd';
import { FC } from 'react';
import { InputWithFormat } from './InputWithFormat';

interface LinkedParameterInputProps {
  type: ParameterObjectType;
  exprId: string;
  expr: string | number;
  setExpr: (val: string | number) => void;
  open: boolean;
  setOpen: (open: boolean) => void;
  tableId: string;
  table: DesignTable;
  showButtonOnly?: boolean;
}

export const LinkedParameterInput: FC<LinkedParameterInputProps> = ({
  type,
  exprId,
  expr,
  showButtonOnly,
  setExpr,
  open,
  setOpen,
  tableId,
  table,
}) => (
  <div className='flex items-center gap-2'>
    {!showButtonOnly && (
      <InputWithFormat
        className='grow'
        inputType={type}
        value={expr}
        onChange={setExpr}
        disabled
        disableParameter
      />
    )}
    <Button
      onClick={() => setOpen(true)}
      icon={
        <AntIcon
          component={() => (
            <svg
              width='24px'
              height='24px'
              fill='currentColor'
            >
              <use href='#commands/common/design-table' />
            </svg>
          )}
        />
      }
    />
    <DesignTableEditor
      open={open}
      tableId={tableId}
      table={table}
      setOpen={setOpen}
      parameterId={exprId}
      setParameter={setExpr}
    />
  </div>
);
